<template>
  <div>
    <!-- 整个页面的外层容器 -->
    <el-container>
      <!-- 顶栏 -->
      <el-header class="layout-header">
        <h1>真品味点餐运营管理平台</h1>
      </el-header>
      <!-- 下半部分 -->
      <el-container class="layout-body">
        <!-- 下半部分的左侧边栏 -->
        <el-aside class="layout-aside">
          <el-menu
              router
              :default-active="activeMenuItemPath"
              class="el-menu-vertical-demo"
              background-color="#222c32"
              text-color="#fff"
              active-text-color="#fff">
            <!-- 首页 -->
            <el-menu-item index="/sys-admin">
              <i class="el-icon-s-home"></i>
              <span>首页</span>
            </el-menu-item>
            <!-- 管理员页面 -->
            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-warning"></i>
                <span>管理员页面</span>
              </template>
              <el-menu-item index="/sys-admin/temp/admin/add-new">
                <i class="el-icon-circle-plus"></i>
                <span>添加管理员</span>
              </el-menu-item>
              <el-menu-item index="/sys-admin/temp/admin/list">
                <i class="el-icon-s-operation"></i>
                <span>管理员列表</span>
              </el-menu-item>
            </el-submenu>
            <!-- 菜品管理 -->
            <el-submenu index="3">
              <template slot="title">
                <i class="el-icon-s-goods"></i>
                <span>菜品管理</span>
              </template>
              <el-menu-item index="/sys-admin/temp/dishes/add-new">
                <i class="el-icon-circle-plus"></i>
                <span>添加菜品</span>
              </el-menu-item>
              <el-menu-item index="/sys-admin/temp/dishes/list">
                <i class="el-icon-s-operation"></i>
                <span>菜品列表</span>
              </el-menu-item>
              <el-menu-item index="/sys-admin/temp/picture/add-new">
                <i class="el-icon-circle-plus"></i>
                <span>添加轮播图</span>
              </el-menu-item>
              <el-menu-item index="/sys-admin/temp/picture/list">
                <i class="el-icon-s-operation"></i>
                <span>轮播图列表</span>
              </el-menu-item>
            </el-submenu>

            <!-- 评论页面 -->
            <el-submenu index="4">
              <template slot="title">
                <i class="el-icon-s-goods"></i>
                <span>评论管理</span>
              </template>
              <el-menu-item index="/sys-admin/temp/comment/add-new">
                <i class="el-icon-circle-plus"></i>
                <span>添加评论</span>
              </el-menu-item>
              <el-menu-item index="/sys-admin/temp/comment/list">
                <i class="el-icon-s-operation"></i>
                <span>评论列表</span>
              </el-menu-item>
            </el-submenu>

            <!-- 店铺页面 -->
            <el-submenu index="5">
              <template slot="title">
                <i class="el-icon-s-goods"></i>
                <span>店铺管理</span>
              </template>
              <el-menu-item index="/sys-admin/temp/store/add-new">
                <i class="el-icon-circle-plus"></i>
                <span>添加店铺</span>
              </el-menu-item>
              <el-menu-item index="/sys-admin/temp/store/list">
                <i class="el-icon-s-operation"></i>
                <span>店铺列表</span>
              </el-menu-item>
            </el-submenu>

            <!-- 类别页面 -->
            <el-submenu index="6">
              <template slot="title">
                <i class="el-icon-s-goods"></i>
                <span>类别管理</span>
              </template>
              <el-menu-item index="/sys-admin/temp/category/add-new">
                <i class="el-icon-circle-plus"></i>
                <span>添加类别</span>
              </el-menu-item>
              <el-menu-item index="/sys-admin/temp/category/list">
                <i class="el-icon-s-operation"></i>
                <span>类别列表</span>
              </el-menu-item>
            </el-submenu>

            <!-- 用户页面 -->
            <el-submenu index="7">
              <template slot="title">
                <i class="el-icon-s-goods"></i>
                <span>用户管理</span>
              </template>
              <el-menu-item index="/sys-admin/temp/user/add-new">
                <i class="el-icon-circle-plus"></i>
                <span>添加用户</span>
              </el-menu-item>
              <el-menu-item index="/sys-admin/temp/user/list">
                <i class="el-icon-s-operation"></i>
                <span>用户列表</span>
              </el-menu-item>
            </el-submenu>

            <!-- 餐桌页面 -->
            <el-submenu index="8">
              <template slot="title">
                <i class="el-icon-s-goods"></i>
                <span>餐桌管理</span>
              </template>
              <el-menu-item index="/sys-admin/temp/table/add-new">
                <i class="el-icon-circle-plus"></i>
                <span>添加餐桌</span>
              </el-menu-item>
              <el-menu-item index="/sys-admin/temp/table/list">
                <i class="el-icon-s-operation"></i>
                <span>餐桌列表</span>
              </el-menu-item>
            </el-submenu>
<!--              <el-menu-item index="3-5" disabled>-->
<!--                <i class="el-icon-s-flag"></i>-->
<!--                <span slot="title">优惠劵</span>-->
<!--              </el-menu-item>-->
<!--              <el-menu-item index="3-6" disabled>-->
<!--                <i class="el-icon-s-data"></i>-->
<!--                <span slot="title">折扣</span>-->
<!--              </el-menu-item>-->
<!--              <el-menu-item index="3-7" disabled>-->
<!--                <i class="el-icon-s-data"></i>-->
<!--                <span slot="title">会员</span>-->
<!--              </el-menu-item>-->
            <!-- 管理员角色关联 -->
<!--            <el-submenu index="4" disabled>-->
<!--              <template slot="title">-->
<!--                <i class="el-icon-s-order"></i>-->
<!--                <span>管理员角色关联</span>-->
<!--              </template>-->
<!--            </el-submenu>-->
            <!-- 员工 -->
<!--            <el-submenu index="5" disabled>-->
<!--              <template slot="title">-->
<!--                <i class="el-icon-s-ticket"></i>-->
<!--                <span>员工</span>-->
<!--              </template>-->
<!--            </el-submenu>-->
<!--            &lt;!&ndash; 管理登录日志 &ndash;&gt;-->
<!--            <el-submenu index="6" disabled>-->
<!--              <template slot="title">-->
<!--                <i class="el-icon-s-shop"></i>-->
<!--                <span>管理登录日志</span>-->
<!--              </template>-->
<!--            </el-submenu>-->
<!--            &lt;!&ndash; 权限管理 &ndash;&gt;-->
<!--            <el-submenu index="7" disabled>-->
<!--              <template slot="title">-->
<!--                <i class="el-icon-s-check"></i>-->
<!--                <span>权限管理</span>-->
<!--              </template>-->
<!--            </el-submenu>-->
<!--             &lt;!&ndash;角色&ndash;&gt;-->
<!--            <el-submenu index="8" disabled>-->
<!--              <template slot="title">-->
<!--                <i class="el-icon-s-check"></i>-->
<!--                <span>角色</span>-->
<!--              </template>-->
<!--            </el-submenu>-->
<!--            &lt;!&ndash;角色权限关联&ndash;&gt;-->
<!--            <el-submenu index="9" disabled>-->
<!--              <template slot="title">-->
<!--                <i class="el-icon-s-check"></i>-->
<!--                <span>角色权限关联</span>-->
<!--              </template>-->
<!--            </el-submenu>-->
<!--            &lt;!&ndash;用户&ndash;&gt;-->
<!--            <el-submenu index="11" disabled>-->
<!--              <template slot="title">-->
<!--                <i class="el-icon-s-check"></i>-->
<!--                <span>用户</span>-->
<!--              </template>-->
<!--            </el-submenu>-->
          </el-menu>
        </el-aside>
        <!-- 下半部分的右侧的主要区域 -->
        <el-main class="layout-main">
          <!-- 使用router-view显示主要区域的内容，即：由其它视图组件来显示主要区域的内容 -->
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style>
.layout-header {
  background: #1684b0;
}

.layout-header h1 {
  color: #fff;
  line-height: 60px;
}

.layout-body {
  position: absolute;
  top: 60px;
  bottom: 0;
  left: 0;
  right: 0;
}

.layout-aside {
  background: #222c32;
}

.layout-aside i {
  color: #fff !important;
}

.layout-main {
  background: #fff;
}

.el-menu-item.is-active {
  background: #2d3c4d !important;
}
</style>

<script>
export default {
  data() {
    return {
      activeMenuItemPath: ''
    }
  },
  created() {
    let jwt = localStorage.getItem('jwt');
    if (!jwt) {
      this.$router.push('/login');
    }
  },
  mounted() {
    // let path = this.$router.currentRoute.path;
    // if (path.startsWith('/sys-admin/temp/spu/add-new-')) {
    //   this.activeMenuItemPath = '/sys-admin/product/spu/add-new-1';
    // } else {
    //   this.activeMenuItemPath = path;
    // }
  }
}
</script>